import React, { Component } from 'react';
import { NavBar,  Toast, Form, Input ,Button,Empty} from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'

import '../styles/Login.scss'
import styles from '../styles/Login.scss'
import * as service from '../api/index'

class Login extends Component {
    constructor(props){
        super(props)
        this.state={
            visible:false,
            disable:true
    
        }
    }
fromRef   = React.createRef()
 back=()=>{//左侧点击回调函数
    console.log(this);
    this.props.history.goBack()
}
async login(){//登录
         const fromdata = this.fromRef.current.getFieldsValue()
         console.log(fromdata);
         if(fromdata.phone&&fromdata.pass){//如果手机号，密码都不为空才再发请求
            var res =  await service.user_login({loginname:(fromdata.phone),password:(fromdata.pass)})
            console.log(res);       
            if(res.data.code==200){
                //保存token 和 用户id
                localStorage.setItem('userid',res.data.data.userid)
                localStorage.setItem('token',res.data.data.token)
                this.props.history.push(`/index`)//去到首页
            }else{
                Toast.show({
                    content: res.data.message ,
                    duration: 1000,
                  })
            }
         }
   
 }
 setVisible(){//密码小眼睛
    this.setState({visible:!this.state.visible})
 }
 goregister(){//去注册页面
    this.props.history.push(`/register`)
 }
//手机号正则、为空校验
phoneValidator = (_, value) => {
    if (value) {
        let reg = /^1[3-9]\d{9}$/;
        if (reg.test(value)) {
            this.setState({
                loginname: value
            })
            return Promise.reject(this.setState({disable:false}));
        }
        return Promise.reject(new Error('手机号无效'),this.setState({disable:true}));
    } else {
        return Promise.reject(new Error('手机号不能为空'),this.setState({disable:true}));
    }
}
//密码为空校验
passwordValidator = (_, value) => {
    if (value) {
        return Promise.reject(this.setState({disable:false}));
    } else {
        return Promise.reject(new Error('密码不能为空'),this.setState({disable:true}));
    }
}
    render() {
        return (
            <div className='login'>
                <div className="top">
                    <NavBar onBack={this.back}>登录</NavBar>
                </div>
                {
                    localStorage.getItem('userid')&&localStorage.getItem('token') ?
                    <Empty description='你已登录无需重新登录'
                    style={{ padding: '64px 0' ,backgroundColor:'white'}}
                    imageStyle={{ width: 128 }}
                    />
                    :
                    <div className="main">
                    <Form 
                    layout='horizontal' ref={this.fromRef}
                    footer={
                        <Button   disabled ={this.state.disable} block type='submit' color='primary' size='middle' shape='rounded'  onClick={()=>{this.login()}} >
                                登录
                        </Button>
                    }
                     >
                        <Form.Item 
                            name='phone' 
                            rules={[{validator: this.phoneValidator}]}
                            >
                            <Input 
                            placeholder='手机号/账户名/邮箱'
                            clearable     

                       />
                        </Form.Item>
                        <Form.Item
                         name='pass'
                         rules={[{validator: this.passwordValidator}]}
                            extra={
                                <div className={styles.eye}>
                                  {!this.state.visible ? (
                                    <EyeInvisibleOutline onClick={() =>this.setVisible()} />
                                  ) : (
                                    <EyeOutline onClick={() => this.setVisible()} />
                                  )}
                                </div>
                              }                         
                        >
                            <Input
                                placeholder='请输入密码'
                                clearable
                                type={this.state.visible ? 'text' : 'password'}
                            />
                        </Form.Item>
                    </Form>
                    <p onClick={()=>{this.goregister()}} >手机快速注册</p>
                </div>

                }
               

                
            </div>
        );
    }
}

export default  Login;